
/**
 * ajax获取首页数据
 */
const cartList = []
let pagenum = 0;
$.ajax({
  url: "http://www.xiongmaoyouxuan.com/api/tab/1",
  method: "GET",
  success: res => {
    if (res.code == 200) {
      //添加数据到本地存储
      obj = res.data.items.list
      //渲染页面
      cartListShow(obj)
    }
  },
  error: res => {
    alert("网络错误" + res.status)
  }
})
/**
 * 轮播图数据获取
 */
$.ajax({
  type: "GET",
  url: "http://www.xiongmaoyouxuan.com/api/tab/1?start=0",
  headers: {
    "x-platform": "pc"
  },
  success: res => {
    if (res.code == 200) {
      // 获取轮播图片
      let ban = res.data.banners
      bannerShow(ban)
    }
  },
  error: res => {
    alert("网络错误" + res.status)
  }
})
/**
 * 渲染商品
 */
function cartListShow(obj) {
  //获取商品数据
  cartList.push(...obj);
  let length = cartList.length;
  while (length % 4 > 0) {
    length--;
  }
  let str3 = ``;
  //判断是否到底
  for (let i = 0; i < length; i++) {
    str3 += `<div class="cartbox" onclick="goodsDetails(${cartList[i].id})">
    <img src="${cartList[i].image}">
    <div class="textvalue">
    <p>${cartList[i].title}</p>
    <div class="centerbox">
    <span class="${cartList[i].platform == 1 ? "taobao" : "tianmao"}">${cartList[i].platform == 1 ? "淘宝" : "天猫"}</span>
    <span class="baoyou">包邮</span>
    </div>
    <div class="pricebox">
    <span class="pricelogo">￥</span>
    <span class="bigprice">${parseInt(cartList[i].price)}</span>
    <span class="smartprice">.${((cartList[i].price * 10) % 10).toFixed(0)}</span>
    <span class="sale-num">${cartList[i].saleNum}人已买</span>
    <span class="${cartList[i].couponValue != "" ? "youhui" : ""}">${cartList[i].couponValue}</span>
    </div>
    </div> 
    </div>`
  }
  $(".lists").html(str3)

}
/**
 * 轮播图
 */
function bannerShow(ban) {
  //将图片依次赋予img
  $(".swiper-slide>img").each((index, item) => {
    item.src = ban[index].imageUrl;
  })
  // swiper初始化轮播
  new Swiper('.swiper', {
    // direction: 'vertical', // 垂直切换选项
    autoplay: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // // 如果需要滚动条
    // scrollbar: {
    //   el: '.swiper-scrollbar',
    // },
  })
}

/**
 * 搜索商品
 */
function findcart() {
  $(".findinput>form>button").on("click", e => {
    e.preventDefault()
    let data={
      word :$(".findinput>form>input").val(),
      start:0,
    }
    localStorage.setItem("findname", JSON.stringify(data))
    location.href = "../findlist.html"
  })
}
findcart()
getMore()
backTop()
/**
 * 更多商品
 */
function getMore() {
  $(".morecarts").on("click", () => {
    pagenum++;
    $.ajax({
      method: "get",
      url: "http://www.xiongmaoyouxuan.com/api/tab/1/feeds",
      data: {
        start: pagenum * 40,
      },
      success: res => {
        if (res.code == 200) {
          let obj = res.data.list
          cartListShow(obj)
        }
      },
      error: res => {
        alert("网络错误" + res.status)
      }
    })
  })
}
/**
 * 点击显示详情页面
 */

function goodsDetails(id) {
  location.href = "../goodsDetails.html?" + id
}

/**
 * 回到顶部
 */

function backTop() {
  //浏览器上下滑动时
  window.onscroll=() => {
    //获取浏览器卷去的距离
    let high = document.body.scrollTop || document.documentElement.scrollTop
    //当卷去高度达到400时显示回到顶部按钮
    if (high > 400) {
      $(".toTop").css("display", "flex");
    } else {
      $(".toTop").css("display", "none");
    }
  }
  //给回到顶部添加点击事件
  $(".toTop").on("click",()=>{
    window.scrollTo({
      top:0,
      left:0,
      behavior:"smooth"
    })
  })
}